<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.yanshisan.cn" />
    <meta name="robots" content="all" />
    <title>程序猿小龙&博客</title>
    <link rel="stylesheet" href="../blog/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../blog/layui/css/layui.css" />
    <link rel="stylesheet" href="../blog/css/master.css" />
    <link rel="stylesheet" href="../blog/css/gloable.css" />
    <link rel="stylesheet" href="../blog/css/nprogress.css" />
    <link rel="stylesheet" href="../blog/css/blog.css" />
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">CodeLong</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="/index">首页</a></li>
                        <li><a href="/article">博客</a></li>
                        <li><a href="/message">留言</a></li>
                        <li><a href="/diary">日志</a></li>
                    </ul>
                </nav>
                <div class="blog-user" id="wego" style="display: none">
                    <img style="width: 40px; height: 40px;padding:10px;" id="wechat-imgurl">
                </div>
                <div class="blog-user">
                    <i class="fa fa-wechat" id="wechat" ></i>
                </div>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner">
		            <article class="article-list bloglist" id="LAY_bloglist" >
						<section class="article-item zoomIn article" id="a1">
							<div class="fc-flag">置顶</div>   
							<h5 class="title">       
								<span class="fc-blue">【原创】</span>       
								<a th:if="${pagelist.size()>0}" th:href="${pagelist[0]}"><span th:if="${list.size()>0}" th:text="${list[0].name}"></span></a>
							</h5>
							<div class="time">
								<span class="day" th:if="${list.size()>0}" th:text="${list[0].day}"></span>
								<span class="month fs-18" th:if="${list.size()>0}" th:text="${list[0].month}"><span class="fs-14">月</span></span>
								<span class="year fs-18 ml10" th:if="${list.size()>0}" th:text="${list[0].year}"></span>
							</div>   
							<div class="content">
								<a class="cover img-light" th:if="${pagelist.size()>0}" th:href="${pagelist[0]}">
									<img th:if="${photopath.size()}>0" th:src="${photopath[0]}">
								</a>
								<p th:if="${list.size()>0}" th:text="${list[0].describe}"></p>
							</div>   
							<div class="read-more">       
								<a th:if="${pagelist.size()>0}" th:href="${pagelist[0]}" class="fc-black f-fwb">继续阅读</a>
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags">           
									<span class="fa fa-tags fs-16"></span>           
									<a class="tag" th:if="${list.size()>0}" th:text="${list[0].tag}"></a>
								</div>       
								<div class="f-fr">
									<span class="ml20">               
										<i class="fa fa-eye fs-16"></i>
										<i class="num">57</i>
									</span>       
								</div>   
							</aside>
						</section>
						<section class="article-item zoomIn article" id="a2">
							<h5 class="title">       
								<span class="fc-blue">【原创】</span>
								<a th:if="${pagelist.size()>1}" th:href="${pagelist[1]}"><span th:if="${list.size()>1}" th:text="${list[1].name}"></span></a>
							</h5>   
							<div class="time">       
								<span class="day" th:if="${list.size()>1}" th:text="${list[1].day}"></span>
								<span class="month fs-18" th:if="${list.size()>1}" th:text="${list[1].month}"><span class="fs-14">月</span></span>
								<span class="year fs-18 ml10" th:if="${list.size()>1}" th:text="${list[1].year}"></span>
							</div>   
							<div class="content">
								<a th:if="${pagelist.size()>1}" th:href="${pagelist[1]}" class="cover img-light">
									<img th:if="${photopath.size()}>1" th:src="${photopath[1]}">
								</a>
                                <p th:if="${list.size()>1}" th:text="${list[1].describe}"></p>
							</div>   
							<div class="read-more">       
								<a th:if="${pagelist.size()>1}" th:href="${pagelist[1]}" class="fc-black f-fwb">继续阅读</a>
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags">           
									<span class="fa fa-tags fs-16"></span>           
									<a class="tag" th:if="${list.size()>1}" th:text="${list[1].tag}"></a>
								</div>       
								<div class="f-fr">
									<span class="ml20">               
										<i class="fa fa-eye fs-16"></i>
										<i class="num">57</i>
									</span>
                                </div>
							</aside>
						</section>
						<section class="article-item zoomIn article" id="a3">
							<h5 class="title">       
								<span class="fc-blue">【原创】</span>
								<a th:if="${pagelist.size()>2}" th:href="${pagelist[2]}"><span th:if="${list.size()>2}" th:text="${list[2].name}"></span></a>
							</h5>   
							<div class="time">       
								<span class="day" th:if="${list.size()>2}" th:text="${list[2].day}"></span>
								<span class="month fs-18"  th:if="${list.size()>2}" th:text="${list[2].month}"><span class="fs-14">月</span></span>
								<span class="year fs-18 ml10" th:if="${list.size()>2}" th:text="${list[2].year}"></span>
							</div>   
							<div class="content">       
								<a th:if="${pagelist.size()>2}" th:href="${pagelist[2]}" class="cover img-light">
									<img th:if="${photopath.size()}>2" th:src="${photopath[2]}">
								</a>
                                <p th:if="${list.size()>2}" th:text="${list[2].describe}"></p>
							</div>   
							<div class="read-more">       
								<a th:if="${pagelist.size()>2}" th:href="${pagelist[2]}" class="fc-black f-fwb">继续阅读</a>
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags">           
									<span class="fa fa-tags fs-16"></span>           
									<a class="tag" th:if="${list.size()>2}" th:text="${list[2].tag}"></a>
								</div>       
								<div class="f-fr">
									<span class="ml20">               
										<i class="fa fa-eye fs-16"></i>
										<i class="num">57</i>
									</span>
                                </div>
							</aside>
						</section>
						<section class="article-item zoomIn article" id="a4">
							<h5 class="title">
								<span class="fc-blue">【原创】</span>
								<a th:if="${pagelist.size()>3}" th:href="${pagelist[3]}"><span th:if="${list.size()>3}" th:text="${list[3].name}"></span></a>
							</h5>
							<div class="time">
								<span class="day" th:if="${list.size()>3}" th:text="${list[3].day}"></span>
								<span class="month fs-18"   th:if="${list.size()>3}" th:text="${list[3].month}"><span class="fs-14">月</span></span>
								<span class="year fs-18 ml10"   th:if="${list.size()>3}" th:text="${list[3].year}"></span>
							</div>
							<div class="content">
								<a th:if="${pagelist.size()>3}" th:href="${pagelist[3]}" class="cover img-light">
									<img th:if="${photopath.size()}>3" th:src="${photopath[3]}">
								</a>
								<p th:if="${list.size()>3}" th:text="${list[3].describe}"></p>
							</div>
							<div class="read-more">
								<a th:if="${pagelist.size()>3}" th:href="${pagelist[3]}" class="fc-black f-fwb">继续阅读</a>
							</div>
							<aside class="f-oh footer">
								<div class="f-fl tags">
									<span class="fa fa-tags fs-16"></span>
									<a class="tag" th:if="${list.size()>3}" th:text="${list[3].tag}"></a>
								</div>
								<div class="f-fr">
									<span class="ml20">
										<i class="fa fa-eye fs-16"></i>
										<i class="num">57</i>
									</span>
                                </div>
							</aside>
						</section>
						<section class="article-item zoomIn article" id="a5">
							<h5 class="title">
								<span class="fc-blue">【原创】</span>
								<a th:if="${pagelist.size()>4}" th:href="${pagelist[4]}"><span th:if="${list.size()>4}" th:text="${list[4].name}"></span></a>
							</h5>
							<div class="time">
								<span class="day" th:if="${list.size()>4}" th:text="${list[4].day}"></span>
								<span class="month fs-18"  th:if="${list.size()>4}"th:text="${list[4].month}"><span class="fs-14">月</span></span>
								<span class="year fs-18 ml10" th:if="${list.size()>4}" th:text="${list[4].year}"></span>
							</div>
							<div class="content">
								<a th:if="${pagelist.size()>4}" th:href="${pagelist[4]}" class="cover img-light">
									<img th:if="${photopath.size()}>4" th:src="${photopath[4]}">
								</a>
								<p  th:if="${list.size()>4}" th:text="${list[4].describe}"></p>
							</div>
							<div class="read-more">
								<a th:if="${pagelist.size()>4}" th:href="${pagelist[4]}" class="fc-black f-fwb">继续阅读</a>
							</div>
							<aside class="f-oh footer">
								<div class="f-fl tags">
									<span class="fa fa-tags fs-16"></span>
									<a class="tag"  th:if="${list.size()>4}" th:text="${list[4].tag}"></a>
								</div>
								<div class="f-fr">
                                    <span class="ml20">
										<i class="fa fa-eye fs-16"></i>
										<i class="num">57</i>
									</span>
                                </div>
							</aside>
						</section>
		            </article>
		        </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
			    		<div class="search">
					        <label class="search-wrap">
					            <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
					            <span class="search-icon">
					                <i class="fa fa-search"></i>
					            </span>
					        </label>
			        		<ul class="search-result"></ul>
			    		</div>
			    		<ul class="category mt20" id="category">
				        	<li data-index="0" class="slider"></li>
				        	<li data-index="1"><a href="/Blog/Article">全部标签</a></li>
				            <li data-index="2"><a href="/Blog/Article/1/" th:text="${tag[0]}"></a></li>
				            <li data-index="3"><a href="/Blog/Article/2/" th:text="${tag[1]}"></a></li>
				            <li data-index="4"><a href="/Blog/Article/3/" th:text="${tag[2]}"></a></li>
				            <li data-index="5"><a href="/Blog/Article/4/" th:text="${tag[3]}"></a></li>
			    		</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>
					            <a href="/Blog/Article/1/" th:text="${tag[0]}"></a>
					            <a href="/Blog/Article/2/" th:text="${tag[1]}"></a>
					            <a href="/Blog/Article/3/" th:text="${tag[2]}"></a>
					            <a href="/Blog/Article/4/" th:text="${tag[3]}"></a>
					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">热门文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li> <a href="" th:if="${list.size()>0}" th:text="${list[0].name}"></a></li>
					                <li> <a href="" th:if="${list.size()>1}" th:text="${list[1].name}"></a></li>
					                <li> <a href="" th:if="${list.size()>2}" th:text="${list[2].name}"></a></li>
					                <li> <a href="" th:if="${list.size()>3}" th:text="${list[3].name}"></a></li>
					                <li> <a href="" th:if="${list.size()>4}" th:text="${list[4].name}"></a></li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">最近访客</h5>
					    <div class="inner">
					        <dl class="vistor" id="vistor">
					        </dl>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <p class="mt05">
                        Copyright &copy; 2020 程序猿小龙
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="../blog/layui/layui.js"></script>
    <script src="../blog/js/yss/gloable.js"></script>
    <script src="../blog/js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
 	<script src="../blog/js/yss/article.js"></script>
    <script th:inline="javascript">
        window.onload = function () {
            NProgress.done();
        };

        layui.use('jquery',function () {
			var $=layui.$;
			var count=[[${list}]];
			console.log([[${list}]].length);
			for(var i=count.length+1;i<=5;i++){
			    var str="#a"+i.toString();
			    $(str).hide();
            }
            if([[${wximage}]]!=null){
                $("#wechat").hide();
                $("#wego").show();
                $("#wechat-imgurl").attr("src",[[${wximage}]]);
            }
            $("#wechat-imgurl").click(function () {
                $("#wechat-imgurl").hide();
                $("#wechat").show();
                $.get("/wechat/invalidate");
            });
            $("#wechat").click(function () {
                window.location.replace("/wechat/attestation");
            });
            $.get("/wximformation",function (data) {
                for(var i=0;i<data.data.length;i=i+2){
                    var img=data.data[i];
                    var name=data.data[i+1];
                    var str="<dd style='margin:0px 2px 0px 2px'><a><img src=\""+img+"\"><cite>"+name+"</cite></a></dd>";
                    var link=$(str);
                    $("#vistor").append(link);
                }
            });
        })
    </script>
</body>
</html>
